<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 500px;
            height: 300px;
            display: block;
            margin: 20px 0;

        }
    </style>
</head>
<body>
     <img lazyload='true'data-origin="https://img2.baidu.com/it/u=976809364,220080911&fm=253&app=120&f=JPEG?w=1422&h=800" alt="">
     <img lazyload='true'data-origin="https://img0.baidu.com/it/u=1149948894,3868364989&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">

     <img lazyload='true'data-origin="https://img1.baidu.com/it/u=2285686819,2371183855&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
     <img lazyload='true'data-origin="https://img2.baidu.com/it/u=2984519231,2295761037&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
     <img lazyload='true'data-origin="https://img1.baidu.com/it/u=1316964179,2271050927&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
     <img lazyload='true'data-origin="https://img1.baidu.com/it/u=1886470779,3897541069&fm=253&app=138&f=JPEG?w=889&h=500" alt="">
     <img lazyload='true'data-origin="https://img0.baidu.com/it/u=691019246,384276428&fm=253&app=138&f=JPEG?w=889&h=500" alt="">
     <img lazyload='true'data-origin="https://img2.baidu.com/it/u=3589262117,135919991&fm=253&app=138&f=JPEG?w=889&h=500" alt="">
     <img lazyload='true'data-origin="https://img1.baidu.com/it/u=3540381205,3099715753&fm=253&app=138&f=JPEG?w=889&h=500" alt="">
     <img lazyload='true'data-origin="https://img0.baidu.com/it/u=3045648023,1400416612&fm=253&app=138&f=JPEG?w=889&h=500" alt="">
     <img lazyload='true'data-origin="https://img1.baidu.com/it/u=606703465,2535051720&fm=253&app=138&f=JPEG?w=889&h=500" alt="">
     <img lazyload='true'data-origin="https://img2.baidu.com/it/u=788742254,34454470&fm=253&app=120&f=JPEG?w=1422&h=800" alt="">
     <script>
        //监听
        window.addEventListener('scroll',throttle(lazyLoad,200))
        function throttle(fn,delay){
           let oldTime=Date.now()
            return function(...args){
                let curTime=Date.now()
                if(curTime-oldTime>delay){
                    fn.call(this,...args)
                    oldTime=Date.now()
                }
            }
        }

        //获取屏幕高度
        const viewHeight = window.innerHeight
        function lazyLoad(){
            const imgs=document.querySelectorAll('img[data-origin][lazyload="true"]')
            imgs.forEach(item=>{
                 const rect=item.getBoundingClientRect()
                 if(rect.top<viewHeight&&rect.bottom>=0){
                     const url=item.dataset.origin
                     item.src=url
                     item.removeAttribute('lazyload')

                 }
            })
            console.log(imgs);
        }
         lazyLoad()
     </script>
</body>
</html>